<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3动画</title>
    <style>
        #zz{
            width:100px;height:100px;
            animation:myfirst 5s;
            -moz-animation: myfirst 5s;
            -webkit-animation: myfirst 5s;
            -o-animation: myfirst 5s;
            animation-fill-mode:forwards;
        }
        #bb{
            width:200px;height:200px;background:red;
            animation:myfirst 5s;
            -moz-animation: myfirst 5s;
            -webkit-animation: myfirst 5s;
            -o-animation: myfirst 5s;
        }
        @keyframes myfirst{
            /*from {background:red;}*/
            /*to{background:yellow;}*/
            0%{opacity:0}
            40%{opacity:0}
            100%{opacity:1;background:red}
        }
        @-moz-keyframes myfirst {
            /*from {background:red;}*/
            /*to{background:yellow;}*/
            0%{opacity:0}
            40%{opacity:0}
            100%{opacity:1;background:red}
        }
        @-webkit-keyframes myfirst {
            /*from {background:red;}*/
            /*to{background:yellow;}*/
            0%{opacity:0}
            40%{opacity:0}
            100%{opacity:1;background:red}
        }
        @-o-keyframes myfirst {
            /*from{background:red}*/
            /*to{background:yellow;}*/
            0%{opacity:0;background:red;}
            40%{opacity:0}
            100%{opacity:1;background:red}
        }
        #zz{
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            -o-animation-delay: 1s;
            animation-delay: 1s;
        }
        #bb{
            -webkit-animation-delay: 5s;
            -moz-animation-delay: 5s;
            -o-animation-delay: 5s;
            animation-delay: 5s;
        }
    </style>
</head>
<body>
    <div id="zz"></div>
    <div id="bb"></div>
</body>
</html>